<template>
  <div style="width: 100%;height: 100%;">
    <div class="con" ref="chartTrend"></div>
  </div>
</template>

<script>
import {getAction} from "@/api/manage";
import request from "@/utils/request";


export default {
  name: "EventTrendPage",
  components: {},
  data() {
    return {
      sevenDayList: [],
    }
  },
  mounted() {
    this.getTrendCount();
  },
  created() {

  },
  methods: {
    getTrendCount() {
      let that = this;
      let params = {};
      getAction('/statistic/event/get7DaysReportCount', params).then(response=>{
        that.sevenDayList = response.data;
        that.$nextTick(() => {
          that.chartTrend();
        })
      })
    },

    chartTrend(){
      let that = this;
      let charts = that.$echarts.init(this.$refs.chartTrend,'');
      let dates = [];
      let reports = [];
      let peoples = [];
      let summary = [];
      for (let i in that.sevenDayList){
        dates.push(that.sevenDayList[i].date)
        reports.push(that.sevenDayList[i].cou)
        peoples.push(that.sevenDayList[i].peopleCount)
        summary.push(that.sevenDayList[i].summary)
      }

      let option = {
        color:["#dd6b66", "#00D3FF", "#ffff43", "#8dc1a9", "#ea7e53", "#eedd78"],
        legend: {
          data: dates
        },
        xAxis: {
          type: 'category',
          data: dates,
          // x轴名称样式
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18
          },
          axisLabel: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'   // axis   item   none三个值
        },
        grid:{
          top: '5%',
          left: '10%',
          bottom:'10%'
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '群众上报',
            type: 'line',
            stack: 'Total',
            data: peoples
          },
          {
            name: '网格员上报',
            type: 'line',
            stack: 'Total',
            data: reports
          },
          {
            name: '总计',
            type: 'line',
            stack: 'Total',
            data: summary
          },
        ]
      };
      charts.setOption(option);
      // 监听 window 窗口大小变化的事件
      window.onresize = function () {
        // 调用 echarts 实例对象的 resize 方法
        charts.resize()
      }
    },



  }
}
</script>
<style scoped lang="scss">

</style>
